<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PhotoSphereViewer - overlay demo</title>

  <link rel="stylesheet" href="../dist/photo-sphere-viewer.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="photosphere"></div>

<script src="../node_modules/three/build/three.js"></script>
<script src="../node_modules/uevent/browser.js"></script>
<script src="../dist/photo-sphere-viewer.js"></script>
<script src="../dist/adapters/cubemap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/randomcolor@0.6.2/randomColor.min.js"></script>

<script>
  const base = 'https://photo-sphere-viewer-data.netlify.app/assets/';

  const panorama = {
    left  : 'cubemap/px.jpg',
    front : 'cubemap/nz.jpg',
    right : 'cubemap/nx.jpg',
    back  : 'cubemap/pz.jpg',
    top   : 'cubemap/py.jpg',
    bottom: 'cubemap/ny.jpg'
  };
  const overlay = {
    left  : base + 'cubemap-overlay/px.png',
    front : base + 'cubemap-overlay/nz.png',
    right : base + 'cubemap-overlay/nx.png',
    back  : base + 'cubemap-overlay/pz.png',
    top   : base + 'cubemap-overlay/py.png',
    bottom: base + 'cubemap-overlay/ny.png'
  };

  const viewer = new PhotoSphereViewer.Viewer({
    container     : 'photosphere',
    adapter       : PhotoSphereViewer.CubemapAdapter,
    panorama      : panorama,
    overlay       : overlay,
    overlayOpacity: 0.8,
    caption       : 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
    loadingImg    : 'assets/photosphere-logo.gif',
    navbar        : [
      {
        content  : 'Remove overlay',
        className: 'custom-button',
        onClick  : () => {
          viewer.setOverlay(null);
        },
      },
      {
        content  : 'Set overlay',
        className: 'custom-button',
        onClick  : () => {
          setOverlay();
        },
      },
    ],
  });

  function setOverlay() {
    const color = randomColor({ luminosity: 'bright' });

    Promise.all(Object.entries(overlay)
      .map(([name, url]) => {
        return viewer.textureLoader.loadImage(url)
          .then(image => {
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const ctx = canvas.getContext('2d');

            ctx.drawImage(image, 0, 0);

            ctx.globalCompositeOperation = 'source-in';
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            return [name, canvas.toDataURL()];
          });
      }))
      .then(images => {
        const panorama = images.reduce((out, [name, url]) => ({
          ...out,
          [name]: url
        }), {});

        viewer.setOverlay(panorama, 0.8);
      });
  }
</script>
</body>
</html>
